<template>
    <z-paging
        v-model="list"
        @query="queryList"
        @onRefresh="refresh"
        ref="paging"
        :refresher-out-rate="0.8"
        empty-view-error-text="暂无数据"
        bg-color="#f5f5f5"
    >
        <view slot="top">
            <view class="search" v-if="styleFirstNum == 1">
                <u-search
                    placeholder="请输入话题"
                    v-model="keyword"
                    bgColor="#F6F6F6"
                    color="#333"
                    placeholderColor="#999999"
                    clearabled
                    height="64rpx"
                    @custom="keywordSearch"
                    :actionStyle="actionStyle"
                />
            </view>
            <view
                class="flex_wrap row_between row_middle"
                v-else
                style="padding: 30rpx"
            >
                <u-icon
                    name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/09/28/f3a97013cf124649ad85e6955f6ca338.png"
                    size="40rpx"
                    label="更多视频"
                    labelSize="36rpx"
                    labelColor="#3D3D3D"
                />
            </view>
        </view>
        <uv-waterfall
            ref="waterfall"
            v-model="list"
            :add-time="240"
            :left-gap="leftGap"
            :right-gap="rightGap"
            :column-gap="columnGap"
            @changeList="changeList"
        >
            <!-- 第二列数据 -->
            <template v-slot:list1>
                <view>
                    <view
                        v-for="(item, index) in list1"
                        :key="item.id"
                        class="waterfall-item"
                        @click="itemClick(item)"
                    >
                        <image
                            :src="item.image"
                            mode="widthFix"
                            :style="[imageStyle(item)]"
                        ></image>
                        <view class="waterfall-item__ft">
                            <view
                                class="waterfall-item__ft__title flex_wrap breakText"
                            >
                                <text class="value">{{ item.title }}</text>
                                <text
                                    style="
                                        padding: 0 10rpx 0 0;
                                        font-weight: 400;
                                        font-size: 24rpx;
                                        color: #588bf3;
                                    "
                                    v-for="v in tagList(item.tag)"
                                    @click="goToBiaoQian(v)"
                                    >#{{ v }}</text
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </template>
            <!-- 第二列数据 -->
            <template v-slot:list2>
                <view>
                    <view
                        v-for="(item, index) in list2"
                        :key="item.id"
                        class="waterfall-item"
                        @click="itemClick(item)"
                    >
                        <image
                            :src="item.image"
                            mode="widthFix"
                            :style="[imageStyle(item)]"
                        ></image>
                        <view class="waterfall-item__ft">
                            <view
                                class="waterfall-item__ft__title flex_wrap breakText"
                            >
                                <text class="value"
                                    >{{ item.title }}
                                    <text
                                        style="
                                            padding: 0 10rpx 0 0;
                                            font-weight: 400;
                                            font-size: 24rpx;
                                            color: #588bf3;
                                        "
                                        v-for="v in tagList(item.tag)"
                                        @click="goToBiaoQian(v)"
                                        >#{{ v }}</text
                                    ></text
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </uv-waterfall>
    </z-paging>
</template>

<script>
import { baseUrl } from "@/config/tendIdConfig";
import caches from "@/config/caches.js";
import { mapState } from "vuex";

export default {
    data() {
        return {
            list: [], // 瀑布流全部数据
            list1: [], // 瀑布流第一列数据
            list2: [], // 瀑布流第二列数据
            leftGap: 10,
            rightGap: 10,
            columnGap: 10,
            styleFirstNum: "",
            actionStyle: {
                fontSize: "28rpx",
                color: "#333",
            },
            keyword: "",
        };
    },
    onShow() {
        uni.hideTabBar();
    },
    onLoad(options) {
        this.styleFirstNum = options.styleFirstNum;
        options.tag && (this.keyword = options.tag);
    },
    computed: {
        ...mapState(["tabName", "authority", "currentTabbarList"]),
        imageStyle(item) {
            return (item) => {
                const v =
                    uni.upx2px(750) -
                    this.leftGap -
                    this.rightGap -
                    this.columnGap;
                const w = v / 2;
                const rate = w / item.w;
                const h = rate * item.h;
                return {
                    width: w + "px",
                    height: "auto",
                };
            };
        },
        tagList() {
            return (tag) => {
                return tag
                    ? tag.split(",").filter((ele) => ele && ele !== " ")
                    : [];
            };
        },
    },
    methods: {
        // 标签
        goToBiaoQian(tag) {
            this.$u.route({
                url: "/pages_video/video/index",
                params: {
                    styleFirstNum: 1,
                    tag,
                },
            });
        },
        keywordSearch() {
            this.$refs.paging.reload();
            this.refresh();
        },
        refresh() {
            // this.list = []
            this.list1 = [];
            this.list2 = [];
            this.$refs.waterfall.clear();
        },
        changeList(e) {  
            this[e.name].push(e.value);
        },
        itemClick(item) {
            uni.navigateTo({
                url: `/pages_video/videoNew/index?clickId=${item.id}`,
            });
        },
        queryList(pageNum, pageSize) {
            // 业务员和客户 目前都用客户的token 统一拦截那边已经做过处理 所以视频这里单拉出来 没走拦截器

            const token =
                this.$store.getters?.customer_token ||
                uni.getStorageSync("customer_token");
            const that = this;
            const params = {
                pageNum: pageNum,
                pageSize: pageSize,
                recordTypeSet: that.styleFirstNum == "1" ? [8] : [0, 1],
                healthMaster: that.styleFirstNum == "1" ? 1 : "",
                // tenantId: this.$tendId,
				doYouOnlyWatchVideosWithProducts:'2',// 0 :只看带商品的的 1:看所有的 2:看不含商品的
				displayPlatform:0,//0十蜂小程序，1数字人，2所有平台
            };
            this.keyword && (params.tag = this.keyword);
            uni.request({
                url: uni.getStorageSync(caches.ACCESS_TOKEN)
                    ? baseUrl + "/customer/video_info_customer/pageVideo"
                    : baseUrl +
                      "/customer/video_info_customer/open/pageVideoNoToken",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: params,
                success(res) {
                    const result = res.data;
                    const dataList = result.data.rows.map((item) => {
                        return {
                            image: item.videoCover,
                            title: item.videoIntro,
                            width: 127,
                            ...item,
                        };
                    });
                    console.log(result.data.rows, "object :>> ", dataList);
                    that.$refs.paging.completeByTotal(
                        dataList,
                        result?.data?.total
                    );
                },
            });
        },
    },
};
</script>

<style lang="scss">
.waterfall {
    background-color: #f1f1f1;
}

.waterfall-item {
    overflow: hidden;
    margin-top: 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}
.breakText {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.waterfall-item__ft {
    padding: 20rpx;
    background: #fff;

    &__title {
        margin-bottom: 10rpx;
        line-height: 48rpx;
        font-weight: 500;
        flex-wrap: wrap;
        .value {
            font-size: 28rpx;
            color: #333333;
        }
    }

    &__desc .value {
        font-size: 28rpx;
        color: #606266;
    }

    &__btn {
        padding: 10px 0;
    }
}
.search {
    padding: 32rpx 28rpx;
    background-color: #fff;
}
</style>
